<template>
	<uni-popup ref="popup" :type="position" @change="handleChange">
		<view class="uni-popup-body">
			<slot></slot>
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref, watch,} from 'vue';

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		position: {
			type: String,
			default: 'center'
		}
	});

	const emit = defineEmits(['update:show', 'change']);

	const popup = ref(null);

	const open = () => {
		if (popup.value) {
			popup.value.open();
		}
	};

	const closed = () => {
		if (popup.value) {
			popup.value.close();
		}
	};

	// Watch for show prop changes
	watch(() => props.show, (newVal) => {
		if (newVal) {
			open();
		} else {
			closed();
		}
	});

	const handleChange = ({
		show
	}) => {
		emit('change', show);
		emit('update:show', show); // for v-model binding
	};
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 9999;

		:deep(.uni-popup__wrapper) {
			background-color: #fff !important;
			border-radius: 16px 16px 0 0;
		}

		.uni-popup-body {
			width: 640rpx;
		}
	}
</style>